<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http:////at.alicdn.com/t/font_1190625_n3wlu0ewu1n.css">
    <link rel="stylesheet" href="../../css/hui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/config.css">
    <title>个人中心</title>
    <style>
        html,body{
            background-color: #FAFAFE;
        }
        .main{
            padding-top: 0;
        }
        .user{
            width: 100%;
            height: 1.61rem;
            padding: 0 .14rem;
            padding-bottom: .62rem;
            background: url('../../image/my_bg.png');
            background-size: 3.75rem 1.61rem;
        }
        .user .left img{
            width: .55rem;
            height: .55rem;
            border-radius: 50%;
        }
        .user .middle{
            width: 2.05rem;
        }
        .user .middle .text{
            font-size: .16rem;
            color: #FFF;
            font-weight: bold;
            margin-bottom: .02rem;
        }
        .user .middle .level{
            width: 100%;
            margin-top: .02rem;
        }
        .user .middle .level img{
            width: .11rem;
            height: .11rem;
            margin-right: .02rem;
        }
        .user .middle .level .vip{
            font-size: .1rem;
            color: #fff;
        }
        .user .right{
            width: auto;
            height: .55rem;
        }
        .user .right i{
            font-size: .22rem;
            color: #fff;
        }
        .user .right i:first-child{
            font-size: .2rem;
            position: relative;
            top: -0.01rem;
            margin-right: .15rem;
        }
        .user_order{
            width: 3.47rem;
            height: 1.09rem;
            margin: 0 auto;
            background-color: #fff;
            margin-top: -0.62rem;
            border-radius: .03rem;
        }
        .user_order .title{
            width: 100%;
            height: .43rem;
            padding: 0 .15rem;
            border-bottom: 1px solid #eee;
        }
        .user_order .title span{
            font-size: .12rem;
            color: #999;
        }
        .user_order .title span:first-child{
            font-size: .14rem;
            color: #111;
        }
        .user_order .order_list{
            width: 100%;
            height: .66rem;
        }
        .user_order .order_list .item{
            width: auto;
        }
        .user_order .order_list .item .icon{
            text-align: center;
            margin-bottom: .02rem;
        }
        .user_order .order_list .item img{
            width: auto;
            height: .18rem;
            margin: 0 auto;
        }
        .user_order .order_list .item i{
            font-size: .18rem;
            display: block!important;
        }
        .user_order .order_list .item span{
            font-size: .12rem;
            color: #666;
            margin-top: .02rem;
        }
        .user_set{
            width: 3.47rem;
            height: auto;
            margin: .1rem auto 0;
            background-color: #fff;
            padding-left: .16rem;
        }
        .user_set .item{
            width: 100%;
            height: .48rem;
        }
        .user_set .item >img{
             height: .18rem;
             width: auto;

        }
        .user_set .item .right{
            width: 3.1rem;
            height: .47rem;
            line-height: .47rem;
            padding-left: .05rem;
            border-bottom: 1px solid #eee;
        }
        .user_set .item:last-child .right{
            border-bottom: none;
        } 
        .user_set .item .right span{
            font-size: .14rem;
            color: #111;
        }
        .user_set .item .right i{
            font-size: .14rem;
            color: #999;
            margin-right: .15rem;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="user flex align-items space-between link-to" data-href="../user/my_set.html">
            <div class="left">
                <img src="../../image/user_heading.png" alt="">
            </div>
            <div class="middle">
                <div class="text">MEROY</div>
                <div class="level flex align-items flex_start">
                    <img src="../../image/vip.png">
                    <div class="vip">普通会员</div>
                </div>
            </div>
            <div class="right">
                <i class="iconfont icon-xiaoxi2"></i>
                <i class="iconfont icon-shezhi "></i>
            </div>
        </div>
        <div class="user_order">
             <div class="title flex align-items space-between">
                 <span>我的订单</span>
                 <span>查看全部订单<i class="iconfont icon-gengduo"></i></span>
             </div>
             <div class="order_list flex space-around align-items">
                <div class="item ">
                    <div class="icon">
                        <img src="../../image/order_s_1.png">
                    </div>
                    <span>待付款</span>                 
                </div>
                <div class="item">
                    <div class="icon">
                        <img src="../../image/order_s_2.png">
                    </div>
                    <span>待发货</span>                 
                </div>
                <div class="item">
                    <div class="icon">
                        <img src="../../image/order_s_3.png">
                    </div>
                    <span>待收货</span>                 
                </div>
                <div class="item">
                    <div class="icon">
                        <img src="../../image/order_s_4.png">
                    </div>
                    <span>待评价</span>                 
                </div>
                <div class="item">
                    <div class="icon">
                        <img src="../../image/order_s_5.png">
                    </div>
                    <span>售后</span>                 
                </div>
             </div>
        </div>
        <div class="user_set">
            <div class="item flex align-items space-between link-to"  data-href="../user/address_list.html">
                <img src="../../image/my_nav_1.png">
                <div class="right ">
                    <span class="fl">地址管理</span>
                    <i class="iconfont icon-gengduo fr"></i>
                </div>
            </div>
            <div class="item flex align-items space-between link-to" data-href="../user/collect.html">
                <img src="../../image/my_nav_2.png">
                <div class="right">
                    <span class="fl">商品收藏</span>
                    <i class="iconfont icon-gengduo fr"></i>
                </div>
            </div>
            <div class="item flex align-items space-between">
                <img src="../../image/my_nav_3.png">
                <div class="right">
                    <span class="fl">分享APP</span>
                    <i class="iconfont icon-gengduo fr"></i>
                </div>
            </div>
        </div>

        <div class="user_set">
            <div class="item flex align-items space-between">
                <img src="../../image/my_nav_4.png">
                <div class="right">
                    <span class="fl">客服热线</span>
                    <i class="iconfont icon-gengduo fr"></i>
                </div>
            </div>
            <div class="item flex align-items space-between clearStorage">
                <img src="../../image/my_nav_5.png">
                <div class="right">
                    <span class="fl">清除缓存</span>
                    <i class="iconfont icon-gengduo fr"></i>
                </div>
            </div>
            <div class="item flex align-items space-between link-to" data-href="../user/my_xitong.html">
                <img src="../../image/my_nav_6.png">
                <div class="right">
                    <span class="fl">我的系统</span>
                    <i class="iconfont icon-gengduo fr"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="item ">
            <img class="f-img" src="../../image/page_index_01.png">
            <img class="s-img" src="../../image/page_index_01_active.png" alt="">
            <div class="text">首页</div>
        </div>
        <div class="item">
            <img class="f-img" src="../../image/page_index_02.png">
            <img class="s-img" src="../../image/page_index_02_active.png">
            <div class="text">分类</div>
        </div>
        <div class="item">
            <img class="f-img" src="../../image/page_index_03.png">
            <img class="s-img" src="../../image/page_index_03_active.png">
            <div class="text">购物车</div>
        </div>
        <div class="item active">
            <img class="f-img" src="../../image/page_index_04.png">
            <img class="s-img" src="../../image/page_index_04_active.png">
            <div class="text">我的</div>
        </div> 
    </div>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/hui.js"></script>
<script src="../../js/common.js"></script>
<script>
    $(document).ready(function(){
        hui.loading('加载中');
        getUserInfo();
        //获取用户信息
        function getUserInfo(){
            ajax('/api/user/get_user_info',{},function(res){
                if (res.code == 1) {
                    let {headimg,username} = res.data;
                    $('.user img').attr('src',headimg);
                    $('.user .text').html(username);
                }
            })
        }
        $('.clearStorage').click(function(){
            setTimeout(()=>{
               hui.upToast('清除成功')
            },200)
        })
    })


</script>
</html>